Shopify Integration Example

Shopify allows for custom apps or scripts to extend store functionality. To integrate Outter with Shopify, you typically create a private app or custom app that can communicate with external APIs (since Shopify front-end is limited in making external calls due to CORS). Here are two common approaches:

• Shopify App (Backend): Create a Node.js or C# (or any language) app that connects to your Shopify store via the Shopify API and also calls Outter. This app could have a small database or use Shopify's metafields to store AI-generated content. For example, when a merchant adds a new product, the app receives a webhook (Product Creation webhook). The app then calls Outter’s Content Generation API to generate a product description, and updates the product in Shopify with the returned text. This way, the description field is filled automatically. Similarly, for recommendations: you might have an endpoint in your app that Shopify can query for recommendations (via an "App Proxy" or embedded widget). That endpoint in your app would call Outter’s Recommendations API, then return the data to the storefront.
• Theme Script (Frontend): For simpler integrations like showing related products, you might use Shopify’s Storefront API or Liquid code to fetch data from your app. The app (backend) still needs to call Outter, but you can use a client-side component to display it. One pattern is to use a Shopify App Proxy: the proxy can be a path on your store that actually forwards the request to your backend. The backend calls Outter, gets recommendations, and returns JSON to the storefront page, which you then render with Liquid or a bit of JavaScript. This avoids CORS issues because the call to Outter is from the backend app.

Example: A Node.js Shopify app uses Express to handle a route /recommendations:

app.get('/recommendations', async (req, res) => {
    const customerId = req.query.customer; // e.g., passed from storefront
    // Call Outter Recommendations API
    try {
      const outterRes = await axios.post('<https://api.outter.ai/v2/ai/recommendations/generate>', {
          user_id: customerId,
          context: { /* include cart or browse data if available */ },
          num_recommendations: 3
      }, {
          headers: { 'Authorization': `X-API-Key ${OUTTER_API_KEY}` }
      });
      res.json(outterRes.data);
    } catch(err) {
      res.status(500).send("Error getting recommendations");
    }
});

In the Shopify theme, you include a script or use Liquid to fetch /apps/your-app/recommendations?customer={{ customer.id }} and then display the returned items as product links. The exact method would depend on whether you want it fully dynamic or pre-rendered.

Shopify Admin Actions: You can also use Outter in the Shopify admin context. For example, a custom product detail page extension could have a "Generate Description" button that triggers a call to your app (which calls Outter). The result is then populated into a field in the Shopify admin UI. This improves the merchant experience by automating content creation directly in their workflow.

Note on API Credentials: In a Shopify app, store the Outter API key in your app's configuration (never expose it to the client-side). The app acts as a bridge between Shopify and Outter, maintaining secure communication with both.

Rate Consideration: If your Shopify store is high-traffic and you're calling Outter for every visitor (like for recommendations on the home page), ensure you stay within rate limits. For high volume scenarios, consider caching recommendations or using Outter’s batch APIs if available (e.g., get many recommendations in one call).